<template>
  <div>
    <Header style="box-shadow: 0 1px 10px 0 #dfdfdf; height:64px; padding:0 28px;">
      <template slot="left">
        <div class="left" @click="drawer = true">
          <i class="el-icon-menu"></i>
        </div>

        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
          <el-breadcrumb-item :to="{ path: '/main' }">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/main/classDetail' }">课程内容</el-breadcrumb-item>
          <el-breadcrumb-item>成员</el-breadcrumb-item>
        </el-breadcrumb>

        <el-drawer :visible.sync="drawer" :direction="'ltr'" size="240px">
          <template slot="title">
            <div style="width: 96px">
              <img src="https://www.ketangpai.com/images/common/logo_blue.png" alt="logo" height="24px">
            </div>
          </template>
          <el-menu class="menu">
            <el-menu-item style="width: 100%" v-for="(item, index) in menus" :key="index" @click="toNav(item.route)">
              <span>{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-drawer>
      </template>

      <template slot="right">
        <RightHeader style="position: absolute; right: 20px; top: 15px;" />
      </template>
    </Header>
    <div>
      <div class="view-member">
        <!-- <div class="viewHeader">
          <div class="le">
            <el-button type="success" size="medium" round
              style="color: #fff;background-color: #00ca90;border-color: #00ca90;" @click="createWorkVisible = true"> +
              添加成员
            </el-button>
            <div class="icont">
              <i></i>
              下载成员
            </div>
          </div>
          <div class="ri"></div>
        </div> -->

        <div class="viewCon">
          <div class="le">
            <el-tabs>
              <el-tab-pane label="全部成员">
                <Member></Member>
              </el-tab-pane>
              <el-tab-pane label="学生分组">
                <Group></Group>
              </el-tab-pane>
            </el-tabs>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import Header from "../../components/header/Header.vue";
import RightHeader from "../../components/header/RightHeader.vue";
import Member from "../member/member/index.vue";
import Group from "../member/group/index.vue";

export default {
  name: "MemberComponent",
  components: {
    Header,
    RightHeader,
    Member,
    Group
  },
  data() {
    return {
      drawer: false,
      menus: [
        {
          name: '我的课堂',
          route: '/main'
        },
        {
          name: '备课区',
          route: '/lessonPreparationArea'
        },
        {
          name: '虚拟教研室',
          route: '/teachingResseach'
        }
      ],
    }
  },
  methods: {
    // 跳转页面
    toNav(nav) {
      this.$router.push(nav)
    },
  },
}
</script>
  
<style scoped lang="less">
.left {
  margin-right: 15px;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.menu {
  font-weight: 600;
}

.view-member {
  width: 1150px;
  height: 540px;
  margin: 10px auto;

  .viewHeader {
    margin-bottom: 16px;

    .le {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icont {
        color: #4285f4;
        cursor: pointer;
        margin-left: 25px;
        font-size: 14px;
      }
    }

    .ri {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .viewCon {
    display: flex;

    .le {
      .view-member .viewCon .le {
        flex: 0 0 270px;
        width: 270px;
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        border-radius: 8px;
        border: 1px solid #dadce0;
        margin-right: 25px;
        padding-bottom: 25px;
        position: absolute;
      }
    }

    .ri {
      flex: 1 1 0%;
      border-radius: 8px;
      border: 1px solid rgb(218, 220, 224);
      width: 850px;
      // margin-left: 295px;
    }

  }
}

.member-list .head {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.classRom {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: rgb(95, 99, 104);
  width: 100%;
  text-align: left;

  .name {
    font-size: 20px;
    color: rgb(32, 33, 36);
    display: inline-block;
    margin-right: 12px;
    font-weight: 700;
    margin-bottom: 8px;
  }
}


.head .rig {
  display: flex;
  align-items: center;
  color: rgb(66, 133, 244);

  .add {
    width: 140px;
  }
}



.member-list {
  .tab_view {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;

    .tab_option {
      position: absolute;
      top: 13px;
      right: 47px;
      z-index: 10;
    }
  }

  .paginationList {
    padding: 16px;
  }
}

.stuHead {
  padding: 20px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/deep/ .el-tabs__nav-wrap::after {
  background: none;
}
</style>
  